import React from "react";

export default class LearnStyle extends React.Component {
  top = 50;

  render() {
    return (
      <div>
        {/* 
          在jsx中变量要使用{}扩起来
          对象也算变量 所以要在外层加一个{}
          值是一个字符串
        */}
        <div style={{ color: "red" }}>红色的文字</div>

        {/* <div style={{ "margin-top": "20px" }}>具体上面20px</div> */}

        <div style={{ marginTop: "20px" }}>距离上面20px</div>

        <div style={{ marginTop: this.top + "px" }}>距离上面{this.top}px</div>
      </div>
    );
  }
}
